<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <th:block th:include="views/include :: header('基本资料')"/>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <style>
        .layui-form-item .layui-input-company {
            width: auto;
            padding-right: 10px;
            line-height: 38px;
        }
    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <form id="add_Pic_Form" lay-filter="add_Pic_Form" class="layui-form" enctype="multipart/form-data">
            <div class="layui-form layuimini-form" th:object="${user}">
                <div class="layui-form-item">
                    <label class="layui-form-label required">管理账号</label>
                    <div class="layui-input-block">
                        <input type="text" name="userName" readonly lay-verify="required" lay-reqtext="管理账号不能为空"
                               placeholder="请输入管理账号" th:field="*{userName}" class="layui-input">
                        <tip>填写自己管理账号的名称。</tip>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">用户昵称</label>
                    <div class="layui-input-block">
                        <input type="text" th:field="*{nickname}" placeholder="请输入用户昵称" class="layui-input">
                        <input type="hidden" th:field="*{userId}">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">邮箱</label>
                    <div class="layui-input-block">
                        <input type="email" th:field="*{email}" placeholder="请输入邮箱" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">头像</label>
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn" id="upload_customer_pic">
                            <i class="layui-icon">&#xe67c;</i>上传图片
                        </button>
                    </div>

                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <div class="layui-inline">
                            <input type="hidden" id="head_img" th:value="*{headImage}">
                            <img class="layui-upload-img" th:src="@{${user.headImage}}" id="headImage"
                                 style="max-width: 200px;max-height: 200px; padding-left: 40px;">
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="saveBtn">确认保存</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<script>
    layui.use(['form', 'layuimini', 'upload'], function () {
        var form = layui.form,
            layer = layui.layer,
            upload = layui.upload,
            layuimini = layui.layuimini;

        if ($("#head_img").val()==null){
            $("#headImage").hide();
        }

        upload.render({
            elem: '#upload_customer_pic', //绑定元素
            accept: "images",
            acceptMime: 'image/*',//打开文件选择框时,只显示图片文件
            auto: false,  //是否选完文件后自动上传。默认值：true
            // bindAction: '#btnSub',
            choose: function (obj) {
                obj.preview(function (index, file, result) {
                    $('#headImage').attr('src', result);

                })
            }
        });

        //监听提交
        form.on('submit(saveBtn)', function (data) {
            var formData = new FormData(document.getElementById("add_Pic_Form"));
            console.log(formData);
            console.log(data.field);
            $.ajax({
                url: "/user/updateUser",
                data: formData,
                type: "post",
                dataType: 'json',
                processData: false,
                contentType: false,
                //4.接收后台修改响应回来的数据；关闭弹出层、提示修改信息、刷新table
                success: function (data) {
                    if (data.code == 0) {
                        layer.msg(data.msg, {
                            offset: '15px',
                            icon: 6,
                            time: 1000
                        }, function () {
                            layuimini.closeCurrentTab();
                        });
                    } else {
                        layer.msg(data.msg, {
                            icon: 5,
                            time: 2000
                        });
                    }
                }
            });
            /*
                        var index = layer.alert(JSON.stringify(data.field), {
                            title: '最终的提交信息'
                        }, function () {
                            layer.close(index);
                            layuimini.closeCurrentTab();
                        });*/
            return false;
        });

    });
</script>
</body>
</html>